<!-- 这里只定义具体的按钮，开箱即用那种。 -->
<template>
	<span class="customBtns">
		<el-button
			type="primary"
			size="mini"
			v-if="type == 'search'"
			@click="searchClick"
		>
			<i class="el-icon-search"></i> 查询
		</el-button>
		<el-button
			type="danger"
			size="mini"
			v-if="type == 'reset'"
			@click="resetClick"
		>
			<i class="el-icon-refresh-right"></i> 重置
		</el-button>
		<el-button
			type="success"
			size="mini"
			v-if="type == 'pledit'"
			@click="pleditClick"
		>
			<i class="el-icon-edit"></i> 批量编辑</el-button
		>
		<el-button
			type="primary"
			size="mini"
			v-if="type == 'add'"
			@click="addClick"
		>
			<i class="el-icon-plus"></i> {{ title ?? "新增" }}
		</el-button>
		<el-button
			type="success"
			size="mini"
			v-if="type == 'save'"
			@click="saveClick"
		>
			<i class="el-icon-folder-checked"></i> 保存</el-button
		>
		<el-button
			type="success"
			size="mini"
			v-if="type == 'print'"
			@click="printClick"
		>
			<i class="el-icon-printer"></i>
			{{ title ?? "打印" }}
		</el-button>

		<el-button
			type="primary"
			:style="{ 'background-color': color }"
			size="mini"
			v-if="type == 'custom'"
			@click="customClick"
			class="customBtn"
		>
			<i :class="icon"></i>
			{{ title }}</el-button
		>

		<el-upload
			v-if="type == 'import'"
			style="display: inline-block"
			:on-success="
				(file, fileList) => {
					handleChange(file, fileList)
				}
			"
			:action="importUrl"
			:multiple="false"
			:limit="1"
			:on-exceed="handleExceed"
			:headers="headers"
			accept=".xls, .xlsx"
		>
			<el-button type="primary" size="mini" @click="importClick">
				<i class="el-icon-upload2"></i> {{ title ?? "导入" }}
			</el-button>
		</el-upload>

		<el-button
			type="primary"
			size="mini"
			v-if="type == 'download'"
			@click="downloadClick"
		>
			<i class="el-icon-download"></i>
			{{ title ?? "下载" }}
		</el-button>
	</span>
</template>

<script>
	import { PopupCommon } from "@/libs/popupCommon"

	export default {
		name: "customButton",
		/**
		 * type按钮类型
		 * 值：   查询：search，重置：reset，新增：add，保存：save ,自定义 custom  (title/icon/type/color必填)
		 */
		props: {
			type: {
				require: true,
				type: String,
			},
			title: {
				require: false,
				type: String,
			},
			icon: {
				require: false,
				type: String,
			},
			color: {
				require: false,
				type: String,
			},
			// 导入的接口地址
			importUrl: {
				require: false,
				type: String,
			},
		},
		data() {
			return {
				headers: {},
			}
		},
		mounted() {},
		methods: {
			/** 文件选择后的操作 */
			handleChange(file, fileList) {
				if (file.success) {
					PopupCommon.notify("success", "导入成功")
					this.$emit("uploadSuccess", "")
				} else {
					PopupCommon.notify("error", file.message)
				}
				console.log(fileList, file)
			},
			handleExceed(files, fileList) {
				this.$message.warning(
					`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
						files.length + fileList.length
					} 个文件`
				)
			},
			/**
			 * 查询点击，触发searchClick事件
			 */
			searchClick() {
				this.$emit("searchClick", "")
			},
			/**
			 * 重置点击，触发searchClick事件
			 */
			resetClick() {
				this.$emit("resetClick", "")
			},
			/**
			 * 新增点击，触发addClick事件
			 */
			addClick() {
				this.$emit("addClick", "")
			},
			/**
			 * 保存点击，触发saveClick事件
			 */
			saveClick() {
				this.$emit("saveClick", "")
			},
			/**
			 * 保存打印，触发printClick事件
			 */
			printClick() {
				this.$emit("printClick", "")
			},
			// 批量编辑
			pleditClick() {
				this.$emit("pleditClick", "")
			},
			customClick() {
				this.$emit("customClick", this.title)
			},

			// 导入
			importClick() {
				this.$emit("importClick", "")
			},
			// 下载
			downloadClick() {
				this.$emit("downloadClick", "")
			},
		},
	}
</script>

<style scoped>
	.customBtn {
		color: #fff;
		border: none;
		height: 28px;
	}
</style>
